<template>
  <div style="padding-top: 20px">
    <Draw ref="draw" :model="model" class="cavs"></Draw>
    <el-form
      style="margin-top: 20px; width: 500px"
      :rules="rules"
      ref="form"
      :model="form"
      label-width="150px"
    >
      <el-form-item label="设备id">
        <el-input v-model="form.id"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import Draw from "@/components/draw.vue";
export default {
  name: "electDrawList",
  components: { Draw },
  data() {
    return {
      graph: null,
      form: {
        id: "",
        // state: "",
      },
      rules: {
        id: [{ required: true, message: "请输入设备id", trigger: "blur" }],
        // state: [
        //   { required: true, message: "请输入设备状态", trigger: "change" },
        // ],
      },
      model: {
        statroomname: "真武庙开闭站",
        statroomnumber: "CQZ136(Z)",
        verifyjson: "",
      },
    };
  },
  mounted() {
    // if (this.$route.query) {
    //   this.model.statroomname = this.$route.query.statroomname;
    //   this.model.statroomnumber = this.$route.query.statroomnumber;
    // }
  },
  methods: {
    // 提交
    onSubmit() {
      let that = this;
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$refs.draw.form = that.form;
          this.$refs.draw.changeCell();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.cavs {
  width: calc(100% - 40px) !important;
  height: 500px !important;
  border: 1px solid #ccc;
  position: relative;
  margin: 20px;
}
</style>
